// 引入vueUse中useIntersectionObserver，用以检测目标元素是否可见
import { useIntersectionObserver } from '@vueuse/core'

// 定义懒加载插件
export const lazyPlugin = {
  install(app) {
    // 定义全局指令:图片懒加载
    app.directive('img-lazy', {
      mounted(el, binding) {
        // el:指令绑定的元素：img
        // binding.value:指令绑定元素里的值
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // console.log(isIntersecting);
            if (isIntersecting) {
              // 进入视口区域
              el.src = binding.value
              // useIntersectionObserver对于元素的监听是一直存在的，除非手动停止监听，存在内存浪费
              stop()
            }
          },
        )
      }
    })
  }
}